<template>
  <h3>欢迎来到OA办公系统</h3>
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="grid-content">
        <div class="grid-content-1" style="background-image: linear-gradient(#e28b76,#955d4e);">
          <div class="content-1">总销售额</div>
          <div class="content-2">301,073</div>
          <div class="content-3">今日销售额 : 4,875</div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content">
        <div class="grid-content-1" style="background-image: linear-gradient(#3695f9,#2a597e);">
          <div class="content-1">总访问量</div>
          <div class="content-2">40,521</div>
          <div class="content-3">今日销售额 : 4,838</div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content">
        <div class="grid-content-1" style="background-image: linear-gradient(#b85ca6,#794780);">
          <div class="content-1">总收藏量</div>
          <div class="content-2">86,411</div>
          <div class="content-3">今日销售额 : 1,946</div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content">
        <div class="grid-content-1" style="background-image: linear-gradient(#0ebbed,#307384);">
          <div class="content-1">总支付量</div>
          <div class="content-2">36,799</div>
          <div class="content-3">今日销售额 : 7,930</div>
        </div>
      </div>
    </el-col>
  </el-row>
  <div ref="chart" style="width: 100%;height:400px;"></div>
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="grid-content">
        <div class="content1">
          <div class="content1-1">今日订单</div>
          <div class="content1-2">
            <div class="content1-21">
              <div>今日订单数</div>
              <div>230</div>
            </div>
            <div class="content1-21">
              <div>汇总确认订单</div>
              <div>679</div>
            </div>
            <div class="content1-22">
              <div>累计金额</div>
              <div>700</div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content">
        <div class="content1">
          <div class="content1-1">本月订单</div>
          <div class="content1-2">
            <div class="content1-21">
              <div>本月订单数</div>
              <div>60823</div>
            </div>
            <div class="content1-21">
              <div>汇总确认订单</div>
              <div>37158</div>
            </div>
            <div class="content1-22">
              <div>累计金额</div>
              <div>102050</div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content">
        <div class="content1">
          <div class="content1-1">快捷入口</div>
          <div class="content1-2">
            <div class="content1-222">
              <el-button @click="ToPage($router.push('/article/channel'))">我的申请</el-button>
              <el-button @click="ToPage($router.push('/index/Console'))">增删改查</el-button>
              <el-button @click="ToPage($router.push('/test/page'))">测试</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DoubleLineChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销售金额', '联盟广告','邮件营销']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '销售金额',
            type: 'line',
            stack: '总量',
            data: [100, 120, 130, 140, 150, 160, 170]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  list-style: none;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 10px;
  min-height: 36px;
  background-color: #fff;

  .grid-content-1 {
    border-radius: 10px;
    color: #fff;
    box-sizing: border-box;

    .content-1 {
      padding: 5px;
    }

    .content-2 {
      font-size: 24px;
      padding-left: 20px;
      padding-bottom: 10px;
      border-bottom: 1.5px solid #fff;
    }

    .content-3 {
      padding: 5px 10px;
    }
  }

  .content1 {
    border-radius: 10px;
    box-sizing: border-box;

    .content1-1 {
      padding: 10px;
    }

    .content1-2 {
      border-top: 1px solid #ececec;
      display: flex;
      padding: 10px 0;
      box-sizing: border-box;

      .content1-222 {
        width: 80%;
        display: flex;
        justify-content: space-between;
        margin: 16px auto;

        button {
          width: 100px;
          height: 40px;
        }
      }

      .content1-21 {
        width: 33%;
        border-right: 1px solid #ececec;
        text-align: center;

        div:nth-child(1) {
          margin: 10px 0;
        }

        div:nth-child(2) {
          font-size: 24px;
        }
      }

      .content1-22 {
        width: 33%;
        text-align: center;

        div:nth-child(1) {
          margin: 10px 0;
        }

        div:nth-child(2) {
          font-size: 24px;
        }
      }
    }
  }
}
</style>
